<template>
    <div style="display: block">
      <el-row>
      <el-col :span="10">
      <el-form ref="formInline" :model="formInline"  style="float: left">
          <el-form-item prop="user" style="float: left">
              <el-input type="text" v-model="formInline.user" placeholder="备忘录标题" style="float: left">备忘录标题</el-input>
          </el-form-item>
          <el-form-item style="float: left">
              <el-button @click="getMemos" type="primary" style="float: left;margin-left: 10px; ">查询1</el-button>
              <el-button @click="drawer = true" type="primary" style="float: left;margin-left: 10px; ">新建</el-button>
          </el-form-item>
          </el-form>
      </el-col>

      </el-row>
      <el-table
        :data="memos"
        border
        style="width: 100%;text-aligin:center">
        <el-table-column
                prop="id"
                label="id"
                width="120" >
        </el-table-column>
        <el-table-column
        prop="title"
        label="标题"
        width="120" >
        </el-table-column>
        <el-table-column
        prop="create_time"
        label="时间"
        width="160">
        </el-table-column>
        <el-table-column
        prop="content"
        label="内容"
        >
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
            <el-button type="text" @click="handleClick(scope)" size="small">查看</el-button>
            <el-button type="text" @click="handleEdit(scope)"  size="small">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope)" size="small">刪除</el-button>
        </template>
        </el-table-column>
    </el-table>
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="articleCount"
                    @current-change="handleChangePage"
            >
            </el-pagination>
        </div>
        <el-drawer
                title="新增备忘"
                :visible.sync="drawer"
                :with-header="false"
                :size=1256
                :before-close="handleCloseDraw"
        >
            <div class="container">
                <el-row style="margin-top: 10px;">
                    <el-col :span="1" style="text-align:center;    display:table;">
                        <p class="md-text1">标题:</p>
                    </el-col>
                    <el-col :span="3">
                        <el-input placeholder="标题" v-model="title"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top:30px;">
                    <mavon-editor style="height: 600px;margin-left: 4px;" v-model="memocontent" :subfield=this.subfield  
                                  :editable=this.editable	 ref="md"  @imgAdd="$imgAdd" />
                </el-row>
                <el-row>
                    <el-col :span="24" style="margin-top: 20px">
                        <el-button @click="addOrUpdateMemo">{{btnSave}}</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-drawer>

    </div>

</template>

<script>
    import axios from '@/api/ajax.js'
    import utils from '@/util/times.js'

    import  Table from 'element-ui/lib/table';
    import  TableColumn from 'element-ui/lib/table-column';
    import Vue from "vue/dist/vue.js";
    import Pagination from 'element-ui/lib/pagination';
    import Message from 'element-ui/lib/message'
    import Drawer from 'element-ui/lib/drawer'
    import MessageBox from 'element-ui/lib/message-box'
    Vue.use(Drawer);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    export default {
        name: "tes",
        data:()=>{
            return{
                editid:-1,
                memos:[],
                title:"",
                btnSave:"保存",
                drawer: false,
                memocontent: "",
                limit:10,
                offset :0,
                formInline: {
                    dockname: '',
                    type: ''
                },
                memoCount:0,
                isupdate:false,
                preview:false,
                subfield:true,
                editable:true,
                value: new Date(),
                articleCount:0
            }
        },
        methods: {
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('image', $file);
                axios({
                    url: process.env.NODE_ENV === 'development'?'http://127.0.0.1:4596/api/image_upload':'https://www.testingcloud.club/sapi/api/image_upload',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data'},
                }).then((url) => {
                    var url1 = process.env.NODE_ENV === 'development'?'http://127.0.0.1:4596/api/image_download/':'https://www.testingcloud.club/sapi/api/image_download/' + url.data.url;


                    this.$refs.md.$img2Url(pos, url1);
                })
            },
            addOrUpdateMemo(){
                if(this.isupdate === false){
                    axios.put('/memo',{
                        "title":this.title,
                        "content":this.memocontent,
                        "create_time": utils.getDateFormat(),
                    }).then(response=> {
                            if (response.data.Status === 0)
                            {
                              Message.success("成功");
                              this.getMemos()
                            }
                        }
                    ).catch(reason => {
                        Message.error("网络错误:" + reason);
                    });
                }else{
                    axios.post('/memo',{
                        "id": this.editid,
                        "title":this.title,
                        "content":this.memocontent,
                        "create_time": utils.getDateFormat(),
                    }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            Message.success("更新成功")
                            this.getMemos()
                        }
                    })
                }
            },
            handlerShow(done) {
                Message.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            handleChangePage(page){
                this.memos = [];
                axios.post('/memos?limit=' + this.limit + '&offset='  + (page-1)*this.limit,{
                }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            let j = 0;
                            for(let len= response.data.Data.length; j < len; j++) {
                                this.memos.push(response.data.Data[j]);
                            }
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            handleClick(row){
                this.title = row.row.title;
                this.memocontent = row.row.content;
                this.editid = row.row.id;
                this.drawer = true;
                this.preview=false,
                this.subfield=false,
                this.editable=false
            },
            handleEdit(row){
              this.editable=true
              this.title = row.row.title;
              this.memocontent = row.row.content;
              this.editid = row.row.id;
              this.drawer = true;
              this.isupdate = true;

            },
            handleCloseDraw(done) {
                MessageBox.confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});

            },
            handleDelete(row){
                axios.post('/delmemo',{
                    "id":row.row.id
                }).then(response=> {
                        if (response.data.Status === 0)
                        {
                            Message.success("删除成功")
                            this.getMemos()
                        }
                    }
                ).catch(reason => {
                    Message.error("网络错误:" + reason);
                });
            },
            getMemos(){
                axios.post('/memos?limit=' + this.limit + '&offset='  + this.offset ,{
                    "title":"",
                }).then(response=> {
                            this.memos = [];
                            if (response.data.Status === 0)
                            {
                                let j = 0;
                                for(let len= response.data.Data.length; j < len; j++) {
                                    this.memos.push(response.data.Data[j]);
                                }

                            }
                        }
                    ).catch(reason => {
                        Message.error("网络错误:" + reason);
                });
            },
            getArticleCount(){
                axios.get('/memocnt').then(response=> {
                            if (response.data.Status === 0)
                            {
                                console.log(response.data.Data)
                                this.articleCount = response.data.Data;
                            }
                        }
                    ).catch(reason => {
                        Message.error("网络错误:" + reason);
                });
            },
        },
        created(){
            this.getMemos();
        },
        mounted() {
            this.getArticleCount();
        },
        beforeCreate() {
            
        }
    }
</script>
<style scoped>
    .el-button--primary:focus, .el-button--primary:hover{
        background: lightblue;
    }
    .container {
        width: 100%;
    }
    .md-text {
        font-size: 12px;
        width: 100%;
    }
    .md-body {
        width: 100%;
        margin-left: 20px;
    }
    .md-text1 {
        font-size: 15px;
        margin-top: 10px;
    }
    .mavonEditor {
        width: 100%;
        height: 800px;
    }
</style>
